<template>
	<view class="content">
		<!-- loading -->
		<image
			v-if="loading"
			class="loading"
			src="/static/images/chicken/loading.gif"
			mode="widthFix"></image>
			
		<!-- 判断网络有无 -->
		<Network :networkShow="networkShow" />
		
		<!-- 背景图 -->
		<image
			class="page-bg"
			:src="skinImage" 
			mode="widthFix"
			:class="{ dong: farmSkinShow || dressShow }"
			:style="style"></image>
			
		<view 
			class="page-container content"
			:class="{ dong: farmSkinShow || dressShow }"
			:style="style">
			<!-- 顶部信息 -->
			<view
				class="page-top"
				v-if="!farmSkinShow && !dressShow && !conversionShow">
				<image
					src="/static/images/chicken/arrow_go.png" 
					mode="widthFix"></image>
				<text class="top-title">万泉农场</text>
			</view>
			
			<!-- 用户信息 -->
			<UserInfo
				:show="!farmSkinShow && !dressShow && !conversionShow"
				:isEditName="true"
				:marginTop="true"
				@changeShow="changeShow" />
			
			<!-- 两侧按钮 -->
			<SideBtn
				:show="!farmSkinShow && !dressShow && !conversionShow"
				@changeShow="changeShow" />
			
			<!-- 小鸡 -->
			<view 
				class="chicken-box"
				v-show="!farmSkinShow && !conversionShow">
				<view class="left">
					<image
						class="img-w166"
						src="/static/images/chicken/egg.png"
						mode="widthFix"></image>
					<text>50%</text>
				</view>
				<view
					class="center"
					:class="{
						more: chickenSizeChange
					}"
					v-if="!getChickenShow">
					<image
						style="width: 350rpx;"
						:class="{
							'my-animate': !dressShow,
						}"
						src="/static/images/chicken/chicken_1.png"
						mode="widthFix"></image>
					<image
						class="shadow"
						src="/static/images/chicken/chicken_shadow.png"
						mode="widthFix"></image>
					<!-- 话语 -->
					<view class="say-box">
						<view class="word">
							<text>张三三的小鸡</text>
						</view>
					</view>
				</view>
				<view 
					class="right" 
					@click="changeShow('integralFeedShow')">
					<image
						class="img-w166"
						src="/static/images/chicken/feed.png"
						mode="widthFix"></image>
					<u-count-down
						class="time"
						:timestamp="timestamp"
						separator-size="20"
						separator-color="#ffffff"
						font-size="20"
						color="#ffffff"
						bg-color="transparent" />
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<BottomBtn
				:show="!farmSkinShow && !dressShow && !conversionShow"
				@changeShow="changeShow" />
		</view>
		
		<!-- 修改名称 -->
		<EditName
			:editNameShow="editNameShow"
			@changeShow="changeShow"
			@nameSuccess="nameSuccess" />
		
		<!-- 消息 -->
		<MyMessage
			:messageShow="messageShow"
			@changeShow="changeShow" />
		
		<!-- 农场皮肤 -->
		<FarmSkin 
			:farmSkinShow="farmSkinShow"
			@changeShow="changeShow"
			@skinChoose="skinChoose" />
		
		<!-- 道具 -->
		<MyProps
			:propShow="propShow"
			@changeShow="changeShow"
			@jump="jump"
			@useSuccess="useSuccess" />
			
		<!-- 装扮 -->
		<ChickenDress
			:dressShow="dressShow"
			@changeShow="changeShow"
			@dressChoose="dressChoose" />

		<!-- 游乐场 -->
		<Game
			:gameShow="gameShow"
			@goOtherFriend="goOtherFriend"
			@changeShow="changeShow" />
		
		<!-- 好友 -->
		<MyFriend
			:friendShow="friendShow"
			@goOtherFriend="goOtherFriend"
			@changeShow="changeShow" />
		
		<!-- 领饲料 -->
		<CollectFeed
			:collectFeedShow="collectFeedShow"
			@goOtherFriend="goOtherFriend"
			@changeShow="changeShow" />
		
		<!-- 去兑换 -->
		<ConversionCenter
			:conversionShow="conversionShow"
			@goOtherFriend="goOtherFriend"
			@changeShow="changeShow" />
		<!-- 农场商城 -->
		<FarmShop
			:farmShopShow="farmShopShow"
			@changeShow="changeShow" />
		<!-- 兑换专区 -->
		<ExchangeArea
			:exchangeAreaShow="exchangeAreaShow"
			@changeShow="changeShow" />
			
		<!-- 首次进入获取小鸡 -->
		<GetChicken
			:getChickenShow="getChickenShow"
			@changeShow="changeShow" />

		<!-- 领取小鸡送饲料 -->
		<GetFeed
			:getFeedShow="getFeedShow"
			@changeShow="changeShow" />
		
		<!-- 积分兑换 -->
		<IntegralFeed
			:integralFeedShow="integralFeedShow"
			@changeShow="changeShow" />
		
		<!-- 鸡蛋兑换记录 -->
		<EggConversion
			:eggConversionShow="eggConversionShow"
			@changeShow="changeShow" />
		
		<!-- 饲料记录和饲料转增 -->
		<FeedRecord
			:feedRecordShow="feedRecordShow"
			@changeShow="changeShow" />
		
		<!-- 折扣卡 -->
		<GetDiscount
			:getDiscountShow="getDiscountShow"
			@changeShow="changeShow" />
		
		<!-- 新蛋卡 -->
		<GetEgg
			:getEggShow="getEggShow"
			@changeShow="changeShow" />
			
		<!-- 分享 -->
		<Share
			:shareShow="shareShow"
			@changeShow="changeShow" />
	</view>
</template>

<script>
	import UserInfo from '@/components/userInfo';
	import EditName from '@/components/chicken/editName';
	import SideBtn from '@/components/chicken/sideBtn';
	import BottomBtn from '@/components/chicken/bottomBtn';
	import MyMessage from '@/components/chicken/myMessage';
	import FarmSkin from '@/components/chicken/farmSkin';
	import MyProps from '@/components/chicken/myProps';
	import ChickenDress from '@/components/chicken/chickenDress';
	import MyFriend from '@/components/chicken/myFriend';
	import CollectFeed from '@/components/chicken/collectFeed';
	import Game from '@/components/chicken/game';
	import ConversionCenter from '@/components/chicken/conversionCenter';
	import FarmShop from '@/components/chicken/farmShop';
	import ExchangeArea from '@/components/chicken/exchangeArea';
	import GetChicken from '@/components/chicken/getChicken';
	import GetFeed from '@/components/chicken/getFeed';
	import IntegralFeed from '@/components/chicken/integralFeed';
	import EggConversion from '@/components/chicken/eggConversion';
	import FeedRecord from '@/components/chicken/feedRecord';
	import GetDiscount from '@/components/chicken/getDiscount';
	import GetEgg from '@/components/chicken/getEgg';
	import Share from '@/components/chicken/share';
	
	import Network from '@/components/network';
	
	import { seckillProducts } from '@/config/chicken';
	import { getNetworkType } from '@/utils/utils';
	
	export default {
		components: {
			UserInfo,
			EditName,
			SideBtn,
			BottomBtn,
			MyMessage,
			FarmSkin,
			MyProps,
			ChickenDress,
			MyFriend,
			CollectFeed,
			Game,
			ConversionCenter,
			FarmShop,
			ExchangeArea,
			GetChicken,
			GetFeed,
			IntegralFeed,
			EggConversion,
			FeedRecord,
			GetDiscount,
			GetEgg,
			Share,
			Network,
		},
		data() {
			return {
				loading: false, // loading加载
				networkShow: false, // 网络有无
				
				editNameShow: false, // 修改名称
				explainShow: false, // 攻略
				messageShow: false, // 消息
				farmSkinShow: false, // 农场皮肤
				skinImage: '/static/images/chicken/bg.png', // 皮肤
				propShow: false, // 道具
				dressShow: false, // 装扮
				timestamp: 1000, // 饲料倒计时
				style: {
					bottom: '0',
				},
				
				chickenSizeChange: false, // 小鸡变化
				
				gameShow: false, // 游乐园
				friendShow: false, // 好友
				collectFeedShow: false, // 领饲料
				conversionShow: false, // 去兑换
				farmShopShow: false, // 去兑换-农场商城
				integralShopShow: false, // 去兑换-积分商城
				exchangeAreaShow: false, // 去兑换-兑换专区
				
				getChickenShow: false, // 首次进入获得小鸡
				getFeedShow: false, // 领取小鸡送饲料
				integralFeedShow: false, // 积分兑换
				eggConversionShow: false, // 鸡蛋兑换记录
				feedRecordShow: false, // 饲料记录和饲料转增
				getDiscountShow: false, // 获得折扣卡
				getEggShow: false, // 获得新蛋卡
				shareShow: false, // 分享
			}
		},
		onLoad() {
			// console.log('=======', wx);
			this.loading = true;
			getNetworkType().then(res => {
				console.log('========', res);
				let content = `当前网络是${ res }`;
				// uni.showModal({
				// 	content
				// });
				this.networkShow = res == 'none';
			});
		},
		onReady() {
			console.log('加载完成');
			// #ifdef H5
			window.addEventListener('load', () => {
				alert(11111111);
				setTimeout(() => {
					this.loading = false;
				}, 2000)
			});
			// #endif
		},
		watch: {
			farmSkinShow: {
				handler(val) {
					this.style.bottom = val ? '200rpx' : '0';
				},
				immediate: true,
			},
			dressShow: {
				handler(val) {
					this.style.bottom = val ? '500rpx' : '0';
				},
				immediate: true,
			}
		},
		methods: {
			// 弹框显隐
			changeShow(val) {
				console.log(val)
				this[val] = !this[val];
				if (val == 'explainShow') {
					uni.navigateTo({
						url: '/pages/explain/explain',
					});
				}
			},
			// 修改名称
			nameSuccess(val) {
				console.log(val);
			},
			// 皮肤
			skinChoose(val) {
				console.log(val);
			},
			// 道具
			useSuccess(val) {
				console.log(val);
			},
			jump(val) {
				console.log(val);
			},
			// 装扮
			dressChoose(val) {
				console.log(val);
			},
			// 去串门
			goOtherFriend(val) {
				console.log(val);
			},
		}
	}
</script>

<style lang="scss" scoped>
.content {
	.loading {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100%;
		height: 100vh;
	}
	
	// 小鸡行
	.chicken-box {
		.left {
			position: absolute;
			left: 22rpx;
			bottom: 275rpx;
			text {
				position: absolute;
				left: 5%;
				text-align: center;
				bottom: 28rpx;
				width: 95%;
				color: #fff;
				font-size: 22rpx;
			}
		}
		.img-w166 {
			width: 166rpx;
		}
		.right {
			position: absolute;
			right: 22rpx;
			bottom: 275rpx;
			.time {
				position: absolute;
				left: 32rpx;
				top: 22rpx;
			}
		}
		.center {
			position: absolute;
			bottom: 340rpx;
			left: 50%;
			transform: translateX(-50%);
			&.more {
				left: 50%;
				margin-left: -60rpx;
				transform: scale(.7) translate(-50%, -100rpx);
				transition: all 1s ease;
			}
			.my-animate {
				position: relative;
				z-index: 1;
				transform-origin: center bottom;
				animation: rotate-img 1s infinite;
			}
			.shadow {
				position: absolute;
				left: 50%;
				bottom: -15rpx;
				transform: translateX(-50%);
				width: 283rpx;
			}
			.say-box {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				transform: translateY(-130%);
				font-size: 24rpx;
				color: #FFEB90;
				text-align: center;
				.word {
					display: inline-block;
					max-width: 100%;
					padding: 8rpx 30rpx;
					background-color: rgba(#386455, .7);
					border-radius: 30rpx;
					text-align: left;
					text {
						position: relative;
						z-index: 11;
					}
					&:after {
						content: ' ';
						position: absolute;
						left: 50%;
						bottom: 0;
						z-index: 9;
						width: 30rpx;
						height: 30rpx;
						transform: translate(-50%, 10%) rotate(45deg);
						background-color: rgba(#386455, .7);
					}
				}
			}
		}
	}
}
</style>
